<!--  -->
<template>
  <div class="songlist mtb">
        <van-nav-bar class="top mttc"  :title="songList.name" :border="false">
      <i slot="left" class="iconfont icon-downarrow mttc" @click="back"></i>
    </van-nav-bar>
    <div ref="songBg" class="songBg">
      <div class="zezao"></div>
      <img :src="songList.img" alt="" srcset="">
      <play-song-list class="play-btn" @play="play"></play-song-list>
    </div>
    <div ref="blackScroll" class="blackForScoll mtb"></div>
    <scroll class="scroll" :probeType="3" @scroll="scroll">
      <song-show v-for="(item,idx) in _songList" :song="item" :key="idx"></song-show>
    </scroll>
  </div>
</template>

<script>

import {songListDetail} from "network/songlist.js";
import playSongList from "components/play-songlist.vue";
import SongShow from "components/songshow.vue"
import Scroll from "base/scroll.vue"
import {prefixStyle, addClass, removeClass} from "common/dom.js"

const Transform = prefixStyle('transform');
const TransformOrigin = prefixStyle('transformOrigin');

export default {
  // name:"recommendsonglist",
  data () {
    return {
      songList: [],
    };
  },

  components: {
    playSongList,
    SongShow,
    Scroll
  },

  computed: {
    _songList(){
      return  this.songList.length ==0? [] :this.songList.songlist.sort((a,b) => { a.id > b.id });
    }
  },

  created(){
    songListDetail(this.$route.query.id).then(data => {
      this.songList = data
    })
  },
  methods: {

    back(){
      this.$router.back();
    },
    scroll(position){
      // console.log(this.$refs.blackScroll)
      // this.$refs.blackScroll.style. = 
      if(position.y == 0){
        removeClass(this.$refs.blackScroll,'mtraf');
      }else{
        addClass(this.$refs.blackScroll,'mtraf');
      }

      if(position.y > 0){
        addClass(this.$refs.songBg,'mtraf');
        this.$refs.songBg.style[TransformOrigin] = "center top";
        this.$refs.songBg.style[Transform] = `scale(${1 + position.y/280})`
      }else{
        removeClass(this.$refs.songBg,'mtraf');        
        this.$refs.songBg.style[TransformOrigin] = "";
        this.$refs.songBg.style[Transform]=""
      }
      
      this.$refs.blackScroll.style[Transform] = `translateY(${position.y}px)`;
      // console.log(position)
    },
    play(){
      console.log('aaaaaaaa')
    }
  }
}

</script>
<style scoped>

.songlist {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.top > div:nth-of-type(2) {
  color: var(--color-theme);
}
.top {
  background: transparent;
}

.blackForScoll, .songBg {
  height: 280px;
  overflow: hidden;
  position: relative;
  z-index: -1;
  top: -50px;
}
.blackForScoll {
  width: 100vw;
  position: absolute;
  top: 280px;
  z-index: 0;
  /* border: 1px solid #ffffff; */
}

.play-btn{
  position: absolute;
      top: 223px;
    margin-left: 123px;
}
.zezao{
  position:absolute;
  width: 100vh;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.scroll {
  /* background: rebeccapurple; */
  position: relative;
  top: -50px;
  height: 390px;
  /* overflow: hidden; */
}
</style>